<template>
	<view class="charts-box">
		<qiun-data-charts :opts="opts" type="column" :chartData="chartData" />
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request';
	export default {
		data() {
			return {
				chartData: {},
				opts: {
					color: ["#FAC858"],
					extra: {
						column: {
							type: "group",
							width: 20,
							barBorderCircle: true,
							linearType: "custom",
							customColor: [
								"#FA7D8D",
								"#EB88E2"
							]
						},
					}
				}
			};
		},
		onReady() {
			// this.getServerData();
			// 请求统计数据
			this.getData();
		},
		methods: {
			async getData() {
				const res = await request('/api/plantingAreaTop');
				console.log(res);
				if (res.statusCode === 200) {
					// 计算类目数据
					const categories = res.data.map(item => item.name);
					// 计算统计数据
					const seriesData = res.data.map(item => item.area);

					this.chartData = {
						categories,
						series: [{
							name: '各地区种植面积统计TOP10',
							data: seriesData
						}]
					}
				}
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
						series: [{
								name: "目标值",
								data: [35, 36, 31, 33, 13, 34]
							},
							{
								name: "完成量",
								data: [18, 27, 21, 24, 6, 28]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>
<style scoped>
	.charts-box {
		margin-top: 100rpx;
		width: 100%;
		height: 300px;
	}
</style>